<!--
# Copyright 2015 The Swarming Authors. All rights reserved.
# Use of this source code is governed by the Apache v2.0 license that can be
# found in the LICENSE file.

--><!--
@group Swarming Elements

`stats-overview' displays an overview of the last 20 minutes stats.

@element stats-overview
--><html><head><style shim-shadowdom="">
/*******************************
          Flex Layout
*******************************/

html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
}

html /deep/ [layout][horizontal] {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

html /deep/ [layout][horizontal][reverse] {
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

html /deep/ [layout][vertical] {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

html /deep/ [layout][vertical][reverse] {
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

html /deep/ [layout][wrap] {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

html /deep/ [layout][wrap-reverse] {
  -ms-flex-wrap: wrap-reverse;
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

html /deep/ [flex] {
  -ms-flex: 1 1 0.000000001px;
  -webkit-flex: 1;
  flex: 1;
  -webkit-flex-basis: 0.000000001px;
  flex-basis: 0.000000001px;
}

html /deep/ [vertical][layout] > [flex][auto-vertical], html /deep/ [vertical][layout]::shadow [flex][auto-vertical] {
  -ms-flex: 1 1 auto;
  -webkit-flex-basis: auto;
  flex-basis: auto;
}

html /deep/ [flex][auto] {
  -ms-flex: 1 1 auto;
  -webkit-flex-basis: auto;
  flex-basis: auto;
}

html /deep/ [flex][none] {
  -ms-flex: none;
  -webkit-flex: none;
  flex: none;
}

html /deep/ [flex][one] {
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

html /deep/ [flex][two] {
  -ms-flex: 2;
  -webkit-flex: 2;
  flex: 2;
}

html /deep/ [flex][three] {
  -ms-flex: 3;
  -webkit-flex: 3;
  flex: 3;
}

html /deep/ [flex][four] {
  -ms-flex: 4;
  -webkit-flex: 4;
  flex: 4;
}

html /deep/ [flex][five] {
  -ms-flex: 5;
  -webkit-flex: 5;
  flex: 5;
}

html /deep/ [flex][six] {
  -ms-flex: 6;
  -webkit-flex: 6;
  flex: 6;
}

html /deep/ [flex][seven] {
  -ms-flex: 7;
  -webkit-flex: 7;
  flex: 7;
}

html /deep/ [flex][eight] {
  -ms-flex: 8;
  -webkit-flex: 8;
  flex: 8;
}

html /deep/ [flex][nine] {
  -ms-flex: 9;
  -webkit-flex: 9;
  flex: 9;
}

html /deep/ [flex][ten] {
  -ms-flex: 10;
  -webkit-flex: 10;
  flex: 10;
}

html /deep/ [flex][eleven] {
  -ms-flex: 11;
  -webkit-flex: 11;
  flex: 11;
}

html /deep/ [flex][twelve] {
  -ms-flex: 12;
  -webkit-flex: 12;
  flex: 12;
}

/* alignment in cross axis */

html /deep/ [layout][start] {
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

html /deep/ [layout][center], html /deep/ [layout][center-center] {
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

html /deep/ [layout][end] {
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

/* alignment in main axis */

html /deep/ [layout][start-justified] {
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

html /deep/ [layout][center-justified], html /deep/ [layout][center-center] {
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

html /deep/ [layout][end-justified] {
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

html /deep/ [layout][around-justified] {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

html /deep/ [layout][justified] {
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

/* self alignment */

html /deep/ [self-start] {
  -ms-align-self: flex-start;
  -webkit-align-self: flex-start;
  align-self: flex-start;
}

html /deep/ [self-center] {
  -ms-align-self: center;
  -webkit-align-self: center;
  align-self: center;
}

html /deep/ [self-end] {
  -ms-align-self: flex-end;
  -webkit-align-self: flex-end;
  align-self: flex-end;
}

html /deep/ [self-stretch] {
  -ms-align-self: stretch;
  -webkit-align-self: stretch;
  align-self: stretch;
}

/*******************************
          Other Layout
*******************************/

html /deep/ [block] {
  display: block;
}

/* ie support for hidden */
html /deep/ [hidden] {
  display: none !important;
}

html /deep/ [relative] {
  position: relative;
}

html /deep/ [fit] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

body[fullbleed] {
  margin: 0;
  height: 100vh;
}

/*******************************
            Other
*******************************/

html /deep/ [segment], html /deep/ segment {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1em 0.5em;
  padding: 1em;
  background-color: white;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px 5px 5px 5px;
}

</style>













<!--
Supports sharing a JSONP-based JavaScript library.

    <core-shared-lib on-core-shared-lib-load="{{load}}" url="https://apis.google.com/js/plusone.js?onload=%%callback%%">

Multiple components can request a library using a `core-shared-lib` component and only one copy of that library will
loaded from the network.

Currently, the library must support JSONP to work as a shared-lib. 

Some libraries require a specific global function be defined. If this is the case, specify the `callbackName` property.

Where possible, you should use an HTML Import to load library dependencies. Rather than using this element,
create an import (`<link rel="import" href="lib.html">`) that wraps loading the .js file:

lib.html:

    <script src="lib.js"></script>

@group Polymer Core Elements
@element core-shared-lib
-->


<!--
Dynamically loads the legacy Google JavaScript API Loader (https://developers.google.com/loader/),
firing the `api-load` event when ready.

Any number of components can use `<google-jsapi>` elements, and the library will only be loaded once.

@element google-jsapi
@extends core-shared-lib
@homepage https://googlewebcomponents.github.io/google-apis
-->





<!--
`google-chart` encapsulates Google Charts as a web component, allowing you to easily visualize
data. From simple line charts to complex hierarchical tree maps, the chart element provides a
number of ready-to-use chart types.

    <google-chart
      type='pie'
      options='{"title": "Distribution of days in 2001Q1"}'
      cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
      rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>
    </google-chart>

Height and width are specified as style attributes:

    google-chart {
      height: 300px;
      width: 50em;
    }

Data can be provided in one of three ways:

- Via the `cols` and `rows` attributes:

      cols='[{"label":"Mth", "type":"string"}, {"label":"Days", "type":"number"}]'
      rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'

- Via the `data` attribute, passing in the data directly:

      data='[["Month", "Days"], ["Jan", 31], ["Feb", 28], ["Mar", 31]]'

- Via the `data` attribute, passing in the URL to a resource containing the
  data, in JSON format:

      data='http://example.com/chart-data.json'

@element google-chart
@status alpha
@homepage http://googlewebcomponents.github.io/google-chart
-->














</head><body><div hidden="">
<polymer-element name="core-xhr" hidden="" assetpath="bower_components/core-ajax/">

  
  
</polymer-element>
<polymer-element name="core-ajax" hidden="" attributes="url handleAs auto params response error method headers body contentType withCredentials progress loading" assetpath="bower_components/core-ajax/">

</polymer-element>

<polymer-element name="core-shared-lib" attributes="url notifyEvent callbackName" assetpath="bower_components/core-shared-lib/">

</polymer-element>
<polymer-element name="google-jsapi" extends="core-shared-lib" assetpath="bower_components/google-apis/">

</polymer-element>

<polymer-element name="google-chart" attributes="type width height options cols rows data" assetpath="bower_components/google-chart/">

  <template>
    <style>:host {
  display: block;
  margin: 0;
  padding: 0;
  width: 400px;
  height: 300px;
}

#chartdiv {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}
</style>
    <core-ajax id="ajax" handleas="json" url="{{data}}" on-core-response="{{externalDataLoaded}}"></core-ajax>
    <div id="chartdiv"></div>
    <google-jsapi on-api-load="{{readyForAction}}"></google-jsapi>
  </template>

  

</polymer-element>
<polymer-element name="stats-chart-base" assetpath="">
  <template>
    <style>
      google-chart {
        width: 100%;
        height: 250px;
      }
    </style>
    <google-chart id="chart" type="line" options="{&quot;title&quot;: &quot;&quot;, &quot;animation&quot;: {&quot;duration&quot;: 500, &quot;easing&quot;: &quot;out&quot;}, &quot;legend&quot;: {&quot;position&quot;: &quot;bottom&quot;} }">
    </google-chart>
    <google-jsapi on-api-load="{{readyForAction}}"></google-jsapi>
  </template>
  
</polymer-element>
<polymer-element name="stats-request-chart" extends="stats-chart-base" attributes="data resolution" assetpath="">
  
</polymer-element>
<polymer-element name="stats-work-chart" extends="stats-chart-base" attributes="data resolution isDimension" assetpath="">
  
</polymer-element>
<polymer-element name="stats-time-chart" extends="stats-chart-base" attributes="data resolution isDimension" assetpath="">
  
</polymer-element></div><polymer-element name="stats-overview" attributes="dimensions" layout="" vertical="" assetpath="">
  <template>
    <core-ajax id="get_stats_summary" headers="{&quot;x-datasource-auth&quot;: &quot;a&quot;}" url="/swarming/api/v1/stats/summary/minutes" params="{&quot;duration&quot;: &quot;20&quot;}" handleas="json" on-core-response="{{onGetStatsSummarySuccess}}">
    </core-ajax>

    <div layout="" vertical="">
      <stats-work-chart data="{{dataTable}}" resolution="minutes">
      </stats-work-chart>

      <stats-time-chart data="{{dataTable}}" resolution="minutes">
      </stats-time-chart>

      <stats-request-chart data="{{dataTable}}" resolution="minutes">
      </stats-request-chart>
    </div>
  </template>

  
</polymer-element>
<script charset="utf-8" src="stats-overview-build.js"></script></body></html>